<template>
  <div class="banking-card">
    <div class="wuyinhangk" v-if="false">
      <img class="imgs" src="../../../../../assets/银行卡缺省.jpg" alt="" />
      <p>暂无绑定银行卡</p>
    </div>
    <div class="youyinhangk" v-else>
      <div
        class="item-yinhangk"
        :class="indexs == 'a' ? 'lvsebeijings' : 'qiehuanbeijing'"
      >
        <div class="yinghang-log">
          <img src="../../../../../assets/USDT ICO.jpg" alt="" />
        </div>
        <div class="name">
          <div class="nane-yinhang">
            <span><slot name="tow"></slot></span>
            <span>**** **** **** 0863</span>
          </div>
          <div class="name-mingzi">
            <span><slot name="name"></slot></span>
          </div>
        </div>
      </div>
    </div>

    <van-button
      block
      type="primary"
      native-type="submit"
      color="linear-gradient(to right, #FA7D22, #FA461B)"
      class="btn"
      @click="binding"
    >
      <slot name="one"></slot>
    </van-button>
    <div class="tishi">
      <span>温馨提示：</span>
      <span>1.请务必绑定取款人姓名名下的银行卡；</span>
      <span>2.最多可绑定 5 张提款卡，您已经成功绑定了 0 张 。</span>
    </div>
  </div>
</template>
<script>
export default {
  props: ["indexs"],
  data() {
    return {
      active: 2,
      index: 1,
    };
  },
  created() {
    console.log(this.indexs);
  },
  methods: {
    binding() {
      this.$emit("dengzhifang", true);
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .van-tab__text--ellipsis {
  font-size: 32px;
}
.banking-card {
  height: 100vh;
  background-color: #f0f0f0;
}
.wuyinhangk {
  width: 100%;
  p {
    text-align: center;
    font-size: 28px;
    color: #5c5d60;
  }
}

.imgs {
  text-align: center;
  margin-top: 120px;
  margin-left: 222px;
}
.btn {
  width: 694px;
  height: 88px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 8px;
}
.tishi {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 24px;
  width: 570px;
  height: 114px;
  margin-left: 54px;
  margin-top: 40px;
  color: #a5a9b3;
}
.youyinhangk {
  margin-top: 40px;
}
.qiehuanbeijing {
  background-image: url(../../../../../assets/USDT背景.jpg);
}
.lvsebeijings {
  background-image: url(../../../../../assets/银行背景.jpg);
}
.item-yinhangk {
  display: flex;
  overflow: hidden;
  width: 694px;
  height: 180px;
  box-sizing: border-box;
  margin: 0 auto;
  .yinghang-log {
    display: flex;
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 50%;
    margin: 32px 28px 48px 28px;
    img {
      border-radius: 50%;
      width: 64px;
      height: 64px;
      margin: 18px;
    }
  }
  .name {
    display: flex;
    justify-content: space-between;
    width: 488px;
    height: 112px;
    color: #fff;
    // background: red;
    margin-top: 36px;
    .name-mingzi {
      span {
        font-size: 24px;
      }
    }
    .nane-yinhang {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      & > span:nth-child(1) {
        font-size: 32px;
      }
      & > span:nth-child(2) {
        font-size: 36px;
      }
    }
  }
}
</style>
